<template>
  <div>
    <!-- 基本信息 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="text-align: left; font-size: 15px"><i class="el-icon-document" />&nbsp;基本信息</span>
        <el-button
          type="primary"
          icon="el-icon-upload"
          style="float: right; padding: 5px" @click="submit()">保存</el-button>
      </div>

      <!-- 基本信息 -->
      <el-form
        ref="form"
        v-model="labelPosition"
        :inline="true"
        :model="form"
        label-width="80px"
      >
        <el-form-item label="客户姓名" style="margin-bottom: 20px !important;">
          <el-input v-model="form.name" class="width220" />
        </el-form-item>
        <el-form-item label="性别" :inline="false">
          <el-select
            v-model="form.sex"
            placeholder="请选择性别"
            class="width220"
          >
            <el-option label="男" value="0" />
            <el-option label="女" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="form.age" class="width220" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.email" class="width220" />
        </el-form-item>
        <el-form-item label="证件类型">
          <el-select
            v-model="form.type"
            placeholder="证件类型"
            class="width220"
          >
            <el-option label="居民身份证" value="居民身份证" />
            <el-option label="士官证" value="士官证" />
            <el-option label="护照" value="护照" />
            <el-option label="港澳台通行证" value="港澳台通行证" />
          </el-select>
        </el-form-item>
        <el-form-item label="证件号码" style="margin-bottom: 20px !important;">
          <el-input v-model="form.idNumber" class="width220" />
        </el-form-item>

        <el-form-item label="省市区">
          <el-cascader
            v-model="form.position"
            expand-trigger="hover"
            :options="options"
            class="width220"
          />
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="form.address" class="width220" />
        </el-form-item>
        <el-form-item label="邮政编码">
          <el-input v-model="form.postCode" class="width220" />
        </el-form-item>
        <el-form-item label="出生日期">
          <el-date-picker
            v-model="form.birthday"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
            class="width220"
          />
        </el-form-item>

        <!--  更多信息 -->
        <el-collapse v-model="activeNames">
          <el-collapse-item title="更多信息" name="1">
            <el-form-item label="客户ID" style="width:300px;">
              <el-input v-model="form.carNum" />
            </el-form-item>
            <el-form-item label="客户类型" :label-width="width90">
              <el-select
                v-model="form.kind"
                placeholder="客户类型"
                class="width210">
                <el-option label="个人" value="个人" />
                <el-option label="公司" value="公司" />
                <el-option label="机构" value="机构" />
              </el-select>
            </el-form-item>
            <el-form-item label="客户等级" :label-width="width90">
              <el-select
                v-model="form.level"
                placeholder="客户等级"
                class="width210">
                <el-option label="A级客户" value="A级客户" />
                <el-option label="B级客户" value="B级客户" />
                <el-option label="C级客户" value="C级客户" />
                <el-option label="D级客户" value="D级客户" />
              </el-select>
            </el-form-item>
            <el-form-item label="备注">
                <el-input
                v-model="form.description"
                type="textarea"
                :autosize="{ minRows: 3, maxRows: 25}"
                placeholder="请输入内容"
                style="width:300px;"
              />
            </el-form-item>
            
          </el-collapse-item>
          <!-- 2 联系方式 -->
          <el-collapse-item title="联系方式" name="3">
            <!-- 联系方式 -->
            <el-button
              style="float: right; padding: 5px; margin-bottom:10px !important;"
              type="success"
              icon="el-icon-circle-plus-outline"
              @click="appendContact">追加</el-button>
            <el-table
              :data="contactData"
              border
              style="width: 100%;margin-bottom:10px;">
              <el-table-column align="center" prop="type" label="电话类型">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.type"
                    placeholder="电话类型"
                    clearable
                    size="mini"
                  />
                </template>
              </el-table-column>
              <el-table-column align="center" prop="nums" label="号码">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.nums"
                    placeholder="号码"
                    maxlength="11"
                    clearable
                    size="mini"
                  />
                </template>
              </el-table-column>
              <el-table-column align="center" prop="name" label="联系人姓名">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.name"
                    placeholder="联系人姓名"
                    clearable
                    size="mini"
                  />
                </template>
              </el-table-column>

              <el-table-column
                align="center"
                prop="isForbident"
                label="禁拨名单"
              >
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.isForbident"
                    placeholder="否"
                    size="mini"
                  >
                    <el-option label="是" value="是" />
                    <el-option label="否" value="否" />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="isUseful" label="有效性">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.isUseful"
                    size="mini"
                    placeholder="有效性"
                    clearable
                  />
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="isDefaultPhone"
                label="是否默认">
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.isDefaultPhone"
                    placeholder="是否默认"
                    size="mini">
                    <el-option label="是" value="是" />
                    <el-option label="否" value="否" />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center">
                  <template slot-scope="scope">
                      <el-col :span="24">
                        <el-button type="danger" icon="el-icon-delete" circle @click="del(scope.$index)"/>
                      </el-col>
                  </template>
                </el-table-column>
            </el-table>
          </el-collapse-item>
        </el-collapse>
      </el-form>
    </el-card>
  </div>
</template>

<script>
  import request from '../../../utils/request.js'
  import { getCity } from './city.js'
  export default {
    data() {
      return {
        width90: "90px",
        value: "",
        value1: "",
        dialogVisible: false,
        labelPosition: "right",
        activeNames: ["3"],
        form: {
          name:'',
          sex:'',
          age:'',
          email:'',
          type:'',
          idNumber:'',
          position:[],
          address:'',
          postCode:'',
          birthday:'',
          carNum:'',
          kind:'',
          level:'',
          description:'',
          contactData:[]
        },
        options2: [
          {
            value: "选项1",
            label: "状态1",
          },
          {
            value: "选项2",
            label: "状态2",
          },
        ],
        options: getCity(),
        selectedOptions2: [],
        contactData: [
          {
            type: "",
            nums: "",
            name: "",
            isForbident: "",
            isUseful: "",
            isDefaultPhone: "",
          },
        ],
      };
    },
    methods: {
      appendContact() {
        const newData = {
          type: "",
          nums: "",
          name: "",
          isForbident: "",
          isUseful: "",
          isDefaultPhone: "",
        };
        this.contactData.splice(0, 0, newData);
      },
      submit() {
          this.form.contactData = this.contactData;
          request.post("/customer/saveCustomerInfo", this.form).then(res=>{
              if (res.code === 200) {
                  this.$message({
                    message: '添加客户成功',
                    type: 'success'
                  });
                  this.form = {};
                  this.form.contactData = [];
                  this.contactData = [
                      {
                        type: "",
                        nums: "",
                        name: "",
                        isForbident: "",
                        isUseful: "",
                        isDefaultPhone: "",
                      }
                  ];
              } else {
                  this.$message.error('添加客户失败');
              }
          })
      },
      del(val) {
          this.contactData.splice(val, 1);
      }
    },
  };
</script>

<style scoped>
  .mt-20 {
    margin-top: 20px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .width220 {
    width: 220px;
  }
  .width210 {
    width: 210px;
  }
</style>
